<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI开发术语发音学习助手</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0c1b33, #162b50);
            color: #e6f1ff;
            min-height: 100vh;
            padding: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
            position: relative;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: #a0c8ff;
        }
        
        .content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
        }
        
        @media (max-width: 1100px) {
            .content {
                grid-template-columns: 1fr;
            }
        }
        
        .input-section {
            background: rgba(16, 32, 64, 0.8);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(79, 172, 254, 0.3);
        }
        
        .output-section {
            background: rgba(16, 32, 64, 0.8);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(79, 172, 254, 0.3);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(79, 172, 254, 0.3);
        }
        
        h2 {
            font-size: 1.8rem;
            color: #4facfe;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        h2 i {
            font-size: 1.5rem;
            color: #00f2fe;
        }
        
        textarea {
            width: 100%;
            height: 200px;
            padding: 15px;
            border-radius: 10px;
            border: none;
            background: rgba(25, 50, 80, 0.7);
            color: white;
            font-size: 1rem;
            resize: vertical;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        
        textarea:focus {
            outline: 2px solid #4facfe;
            background: rgba(35, 70, 110, 0.8);
            box-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
        }
        
        .btn-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(79, 172, 254, 0.3);
            color: white;
        }
        
        button.primary {
            background: linear-gradient(45deg, #00c6ff, #0072ff);
        }
        
        button.warning {
            background: linear-gradient(45deg, #ffc107, #e0a800);
        }
        
        button.danger {
            background: linear-gradient(45deg, #dc3545, #bd2130);
        }
        
        button.info {
            background: linear-gradient(45deg, #17a2b8, #138496);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .card {
            background: rgba(25, 50, 80, 0.8);
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s ease;
            border: 1px solid rgba(79, 172, 254, 0.3);
            display: flex;
            align-items: center;
            gap: 30px;
        }
        
        .card:hover {
            background: rgba(35, 70, 110, 0.9);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 50, 150, 0.3);
        }
        
        .word {
            font-size: 1.8rem;
            font-weight: bold;
            color: #4facfe;
            width: 200px;
            text-align: center;
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .pronunciation-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(79, 172, 254, 0.5);
            position: relative;
            flex-shrink: 0;
        }
        
        .pronunciation-btn:hover {
            transform: scale(1.1);
            background: #4facfe;
            box-shadow: 0 0 15px rgba(79, 172, 254, 0.5);
        }
        
        .meaning {
            font-size: 1.1rem;
            line-height: 1.6;
            flex-grow: 1;
            padding: 0 20px;
        }
        
        .save-section {
            margin-top: 20px;
            padding: 20px;
            background: rgba(25, 50, 80, 0.7);
            border-radius: 10px;
        }
        
        .save-controls {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        
        .saved-wordsets {
            margin-top: 30px;
        }
        
        .wordset-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 15px;
        }
        
        .wordset-item {
            background: rgba(25, 50, 80, 0.7);
            padding: 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 15px;
            border: 1px solid rgba(79, 172, 254, 0.3);
            position: relative;
        }
        
        .wordset-item:hover {
            background: rgba(79, 172, 254, 0.2);
            border-color: rgba(79, 172, 254, 0.5);
        }
        
        .wordset-item .count {
            background: #4facfe;
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-left: auto;
        }
        
        .delete-wordset {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #dc3545;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.9rem;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
        
        footer {
            text-align: center;
            padding: 30px 0;
            margin-top: 40px;
            opacity: 0.8;
            font-size: 0.9rem;
            color: #a0c8ff;
        }
        
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            color: #a0c8ff;
            grid-column: 1 / -1;
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 20px;
            opacity: 0.5;
        }
        
        input {
            padding: 12px 15px;
            border-radius: 8px;
            border: none;
            background: rgba(25, 50, 80, 0.7);
            color: white;
            font-size: 1rem;
            width: 100%;
        }
        
        input:focus {
            outline: 2px solid #4facfe;
            background: rgba(35, 70, 110, 0.8);
        }
        
        .instructions-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .instructions-content {
            background: rgba(16, 32, 64, 0.95);
            width: 90%;
            max-width: 700px;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 0 30px rgba(79, 172, 254, 0.5);
            border: 1px solid #4facfe;
            position: relative;
        }
        
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 1.5rem;
            color: #a0c8ff;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .close-btn:hover {
            color: #4facfe;
            transform: rotate(90deg);
        }
        
        .instructions-content h3 {
            color: #4facfe;
            margin-bottom: 20px;
            font-size: 1.8rem;
            text-align: center;
        }
        
        .instructions-content ul {
            padding-left: 20px;
            margin-bottom: 30px;
        }
        
        .instructions-content li {
            margin-bottom: 15px;
            line-height: 1.6;
            color: #e6f1ff;
        }
        
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .btn-group {
                flex-direction: column;
            }
            
            .card {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .word {
                width: 100%;
                font-size: 1.8rem;
            }
            
            .meaning {
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-robot"></i> AI开发术语发音学习助手</h1>
            <p class="subtitle">输入AI开发术语和中文释义，一键生成简洁高效的学习卡片</p>
        </header>
        
        <div class="content">
            <div class="input-section">
                <div class="section-header">
                    <h2><i class="fas fa-keyboard"></i> 输入单词列表</h2>
                </div>
                
                <p>每行输入：<span style="color: #4facfe;">英文单词: 中文释义</span></p>
                <textarea id="wordInput" placeholder="请输入格式：英文单词: 中文释义">CUDA: NVIDIA开发的并行计算平台，用于GPU加速AI训练
PyTorch: 基于Python的深度学习框架，广泛应用于AI研究和开发
TensorRT: NVIDIA的AI模型推理优化器，大幅提升推理性能
Kubernetes: 容器编排系统，用于自动化部署和管理容器化应用
DeepSpeed: 微软推出的深度学习优化库，大幅降低训练成本
vLLM: 高效的大语言模型推理框架，实现低延迟响应
Transformer: 革命性的神经网络架构，现代大语言模型的基础
Federated: 联邦学习技术，在保护数据隐私的前提下进行分布式模型训练</textarea>
                
                <div class="btn-group">
                    <button class="primary" id="generateBtn">
                        <i class="fas fa-cogs"></i> 生成学习卡片
                    </button>
                    <button class="warning" id="exampleBtn">
                        <i class="fas fa-lightbulb"></i> 示例单词
                    </button>
                    <button class="danger" id="clearBtn">
                        <i class="fas fa-trash"></i> 清空
                    </button>
                    <button class="info" id="showInstructionsBtn">
                        <i class="fas fa-question-circle"></i> 使用说明
                    </button>
                </div>
                
                <div class="save-section">
                    <h3><i class="fas fa-save"></i> 保存当前单词本</h3>
                    <div class="save-controls">
                        <input type="text" id="wordsetName" placeholder="输入单词本名称">
                        <button class="primary" id="saveBtn">
                            <i class="fas fa-save"></i> 保存
                        </button>
                    </div>
                </div>
                
                <div class="saved-wordsets">
                    <h3><i class="fas fa-bookmark"></i> 已保存的单词本</h3>
                    <div class="wordset-list" id="wordsetList">
                        <!-- 保存的单词本将在这里显示 -->
                    </div>
                </div>
            </div>
            
            <div class="output-section">
                <div class="section-header">
                    <h2><i class="fas fa-graduation-cap"></i> 学习卡片</h2>
                    <div style="color: #a0c8ff; font-size: 0.9rem;">
                        共 <span id="wordCount">0</span> 个术语
                    </div>
                </div>
                
                <div class="cards-container" id="cardsContainer">
                    <!-- 卡片将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 AI开发术语发音学习助手 | 专为开发者设计的英语学习工具</p>
            <p>使用Web Speech API技术 | 兼容Chrome, Firefox, Edge等现代浏览器</p>
        </footer>
    </div>
    
    <!-- 使用说明模态框 -->
    <div class="instructions-modal" id="instructionsModal">
        <div class="instructions-content">
            <span class="close-btn" id="closeInstructionsBtn">
                <i class="fas fa-times"></i>
            </span>
            <h3><i class="fas fa-info-circle"></i> 使用说明</h3>
            <ul>
                <li><strong>输入格式</strong>：每行输入格式为 <code>英文单词: 中文释义</code>，例如：<code>CUDA: NVIDIA开发的并行计算平台</code></li>
                <li><strong>生成卡片</strong>：点击"生成学习卡片"按钮创建横向布局的学习卡片</li>
                <li><strong>发音功能</strong>：点击卡片上的发音按钮听取美式发音（每个卡片只有一个发音按钮）</li>
                <li><strong>保存单词本</strong>：输入单词本名称并点击"保存"按钮保存当前单词列表</li>
                <li><strong>加载单词本</strong>：点击已保存的单词本名称可重新加载</li>
                <li><strong>删除单词本</strong>：点击单词本右上角的删除按钮可删除保存的单词本</li>
                <li><strong>示例单词</strong>：点击"示例单词"加载预设的AI开发术语</li>
                <li><strong>清空功能</strong>：点击"清空"按钮清除当前输入</li>
            </ul>
            <div style="text-align: center; margin-top: 20px;">
                <button class="primary" id="closeModalBtn">
                    <i class="fas fa-check"></i> 我明白了
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 初始单词数据
        const initialWords = [
            "CUDA: NVIDIA开发的并行计算平台，用于GPU加速AI训练",
            "PyTorch: 基于Python的深度学习框架，广泛应用于AI研究和开发",
            "TensorRT: NVIDIA的AI模型推理优化器，大幅提升推理性能",
            "Kubernetes: 容器编排系统，用于自动化部署和管理容器化应用",
            "DeepSpeed: 微软推出的深度学习优化库，大幅降低训练成本",
            "vLLM: 高效的大语言模型推理框架，实现低延迟响应",
            "Transformer: 革命性的神经网络架构，现代大语言模型的基础",
            "Federated: 联邦学习技术，在保护数据隐私的前提下进行分布式模型训练"
        ];
        
        // DOM元素
        const wordInput = document.getElementById('wordInput');
        const generateBtn = document.getElementById('generateBtn');
        const clearBtn = document.getElementById('clearBtn');
        const exampleBtn = document.getElementById('exampleBtn');
        const saveBtn = document.getElementById('saveBtn');
        const wordsetName = document.getElementById('wordsetName');
        const wordsetList = document.getElementById('wordsetList');
        const cardsContainer = document.getElementById('cardsContainer');
        const wordCount = document.getElementById('wordCount');
        const showInstructionsBtn = document.getElementById('showInstructionsBtn');
        const instructionsModal = document.getElementById('instructionsModal');
        const closeInstructionsBtn = document.getElementById('closeInstructionsBtn');
        const closeModalBtn = document.getElementById('closeModalBtn');
        
        // 初始化页面
        function initPage() {
            // 加载保存的单词本
            loadSavedWordsets();
            
            // 设置示例单词
            wordInput.value = initialWords.join('\n');
            
            // 生成初始卡片
            generateCards();
        }
        
        // 生成卡片
        function generateCards() {
            const lines = wordInput.value.split('\n')
                .map(line => line.trim())
                .filter(line => line.length > 0);
            
            // 更新单词计数
            wordCount.textContent = lines.length;
            
            if (lines.length === 0) {
                cardsContainer.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-microphone-alt"></i>
                        <h3>没有单词可显示</h3>
                        <p>请在左侧输入单词并点击"生成学习卡片"按钮</p>
                    </div>
                `;
                return;
            }
            
            cardsContainer.innerHTML = '';
            
            lines.forEach(line => {
                // 分割每行数据为单词和释义
                const parts = line.split(':');
                if (parts.length < 2) return;
                
                const word = parts[0].trim();
                const meaning = parts.slice(1).join(':').trim();
                
                const card = document.createElement('div');
                card.className = 'card';
                card.innerHTML = `
                    <div class="word">${word}</div>
                    <div class="pronunciation-btn" data-word="${word}">
                        <i class="fas fa-volume-up"></i>
                    </div>
                    <div class="meaning">
                        ${meaning}
                    </div>
                `;
                
                cardsContainer.appendChild(card);
                
                // 添加发音事件
                const btn = card.querySelector('.pronunciation-btn');
                btn.addEventListener('click', () => {
                    speakWord(word);
                    
                    // 添加动画效果
                    const icon = btn.querySelector('i');
                    icon.className = 'fas fa-waveform-lines';
                    setTimeout(() => {
                        icon.className = 'fas fa-volume-up';
                    }, 1000);
                });
            });
        }
        
        // 清空输入
        function clearInput() {
            wordInput.value = '';
            generateCards();
        }
        
        // 加载示例单词
        function loadExampleWords() {
            wordInput.value = initialWords.join('\n');
            generateCards();
        }
        
        // 保存单词本
        function saveWordset() {
            const name = wordsetName.value.trim();
            if (!name) {
                alert('请输入单词本名称');
                return;
            }
            
            const lines = wordInput.value.split('\n')
                .map(line => line.trim())
                .filter(line => line.length > 0);
            
            if (lines.length === 0) {
                alert('当前没有单词可以保存');
                return;
            }
            
            // 获取现有保存的单词本
            const savedWordsets = JSON.parse(localStorage.getItem('aiDevWordsets') || '{}');
            
            // 保存新单词本
            savedWordsets[name] = lines;
            localStorage.setItem('aiDevWordsets', JSON.stringify(savedWordsets));
            
            // 更新UI
            wordsetName.value = '';
            loadSavedWordsets();
            alert(`单词本 "${name}" 保存成功！`);
        }
        
        // 加载保存的单词本
        function loadSavedWordsets() {
            const savedWordsets = JSON.parse(localStorage.getItem('aiDevWordsets') || '{}');
            wordsetList.innerHTML = '';
            
            if (Object.keys(savedWordsets).length === 0) {
                wordsetList.innerHTML = '<p style="padding:15px; color:#a0c8ff; text-align:center;">暂无保存的单词本</p>';
                return;
            }
            
            for (const [name, lines] of Object.entries(savedWordsets)) {
                const item = document.createElement('div');
                item.className = 'wordset-item';
                item.innerHTML = `
                    <i class="fas fa-book"></i>
                    <span>${name}</span>
                    <span class="count">${lines.length}词</span>
                    <div class="delete-wordset" data-name="${name}">
                        <i class="fas fa-times"></i>
                    </div>
                `;
                
                item.addEventListener('click', (e) => {
                    // 防止点击删除按钮时触发加载
                    if (!e.target.closest('.delete-wordset')) {
                        wordInput.value = lines.join('\n');
                        generateCards();
                    }
                });
                
                // 添加删除事件
                const deleteBtn = item.querySelector('.delete-wordset');
                deleteBtn.addEventListener('click', () => {
                    if (confirm(`确定要删除单词本 "${name}" 吗？`)) {
                        delete savedWordsets[name];
                        localStorage.setItem('aiDevWordsets', JSON.stringify(savedWordsets));
                        loadSavedWordsets();
                    }
                });
                
                wordsetList.appendChild(item);
            }
        }
        
        // 发音函数
        function speakWord(word, lang = 'en-US') {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(word);
                
                // 设置语音参数
                utterance.lang = lang;
                utterance.rate = 0.9;
                utterance.pitch = 1;
                utterance.volume = 1;
                
                // 停止任何正在进行的语音
                window.speechSynthesis.cancel();
                
                // 播放语音
                window.speechSynthesis.speak(utterance);
            } else {
                alert('您的浏览器不支持语音合成功能，请使用Chrome、Edge或Firefox等现代浏览器。');
            }
        }
        
        // 显示使用说明
        function showInstructions() {
            instructionsModal.style.display = 'flex';
        }
        
        // 隐藏使用说明
        function hideInstructions() {
            instructionsModal.style.display = 'none';
        }
        
        // 事件监听
        generateBtn.addEventListener('click', generateCards);
        clearBtn.addEventListener('click', clearInput);
        exampleBtn.addEventListener('click', loadExampleWords);
        saveBtn.addEventListener('click', saveWordset);
        showInstructionsBtn.addEventListener('click', showInstructions);
        closeInstructionsBtn.addEventListener('click', hideInstructions);
        closeModalBtn.addEventListener('click', hideInstructions);
        
        // 点击模态框外部关闭
        instructionsModal.addEventListener('click', (e) => {
            if (e.target === instructionsModal) {
                hideInstructions();
            }
        });
        
        // 初始化页面
        window.addEventListener('load', initPage);
    </script>
</body>
</html>